﻿﻿<html>
<head>
    <meta charset="UTF-8">
    <title>赛事详情</title>
    ﻿
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description
		for your new site here. You can edit this line in _config.yml.
		It will appear in your document head meta (for Google search results)
		and in your feed.xml site description.
		">
    <link rel="stylesheet" href="../css/weui-v0.4.3.css">
    <link rel="stylesheet" href="../css/weui2.css">
    <script src="../lib/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>
<body>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
        <div class="swiper-slide"><img src="${pic}" alt=""></div>

    </div>
</div>
<div class="detail-card">
    <div class="detail-title">
        <span>${eventName}</span>
    </div>

    <div class="card-line">
        <div class="card-line-logo">
            <img src="../images/time.png">
        </div>
        <span class="blank"></span>
        <div class="card-line-content">

            <span>${raceBeginTime} 至 ${raceEndTime}</span>
        </div>
    </div>
    <div class="card-line">
        <div class="card-line-logo">
            <img src="../images/location.png">
        </div>
        <span class="blank"></span>
        <div class="card-line-content">

            <span>${place}</span>
        </div>
    </div>
    <div class="card-line">
        <div class="card-line-logo">
            <img src="../images/race.png">
        </div>
        <span class="blank"></span>
        <div class="card-line-content">

            <span>${organizerName}</span>
        </div>
    </div>
    <div class="card-line">
        <div class="card-line-logo">
            <img src="../images/host.png">
        </div>
        <span class="blank"></span>
        <div class="card-line-content">

            <span>${host}</span>
        </div>
    </div>
    <div class="card-line" style="margin-bottom: 3px;">
        <div class="card-line-logo">
            <img src="../images/done.png">
        </div>
        <span class="blank"></span>
        <div class="card-line-content executive">
            <span>${executive}</span>
        </div>
    </div>
</div>
<div class="gray">
    赛事简介
</div>
<div class="detail-content" style="text-indent: 2em;font-size: 12px;padding: 1rem">
   ${introduction}
</div>
<div class="gray">
    赛事详情
</div>
<div class="detail-content" style="margin-bottom: 50px;font-size: 12px;padding: 1rem">
    ${detail}
</div>
<footer>
    <div id="goto">
        我要报名
    </div>
</footer>
</body>
</html>
<style>
    html {
        margin: 0;
        padding: 0;

    }

    body {
        margin: 0;
        padding: 0;
        background-color: white;
    }

    .swiper-container {
        width: 100%;
        height: 200px;
        z-index: -1;
    }

    .swiper-slide img {
        width: 100%;
        height: 200px;
    }

    .detail-card {
        margin-top: -20px;
        background-color: #e6e6e6;
        padding: 0 10px;
        display: block;
        background: url(https://img-qn.hudongba.com/static_v4/images/detail/newWapDetailTitBgCopy1.png) no-repeat center bottom/100% 100%;
    }

    .detail-title span {
        display: inline-block;
        font-size: 16px;
        line-height: 25px;
        width: 100%;
        text-align: center;
        padding-top: 10px;
    }

    .detail-card .card-line {
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        padding: 2.5px 10px;
        width: 100%;
    }

    .detail-card .card-line .card-line-logo {
        display: inline-block;
    }

    .detail-card .card-line .card-line-content {
        display: inline-block;
        font-size: 12px;
    }

    .detail-card .card-line .card-line-logo img {
        width: 15px;
        height: 15px;
        padding: 0px;
        margin: 0px;
        vertical-align: middle
    }


    .blank {
        margin-left: 1rem;
    }



    .gray {
        line-height: 50px;
        background-color: #efeff4;
        text-indent: 1em;
        font-size: 14px;
    }

    footer {
        height:50px;
        width:100%;
        background-color:#09BA07;
        bottom: 0px;
        position: fixed;
        text-align: center;
        color: white;
    }
    footer div{
        margin-top: 10px;
    }
</style>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            stopOnLastSlide: true
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
    $("#goto").click(function(){
                window.location.href = "/event${eventId}/part1.html"
    })
    let executive = $(".executive").html()
    if (executive.indexOf('、')){
        let split = executive.split('、');
        let contentc = split[0]+'</span><br/><span>'+ split[1]
        $(".executive").html(contentc)
    }
</script>
